<script lang="ts">
	import Ask from '$lib/images/ask.svg';
	import Answer from '$lib/images/answer.svg';
	let moduleList = ['最新', 'svelte', 'vue', 'jquery', 'react'];
	export let data: any;
</script>

<svelte:head>
	<title>博客</title>
</svelte:head>

<div class="flex flex-wrap gap-2 justify-center mt-5">
	<div class="w-full md:w-6/12 bg-white rounded-lg p-4">
		{#if data.module}
			<h3>
				{data.module}
				<span class="about-amount">共有{data.module}相关问答{data.posts.length}条</span>
			</h3>
		{:else}
			<h3>博客</h3>
		{/if}
		<div class="content">
			<div class="tag-wrapper">
				{#each moduleList as moduleItem}
					{#if data.module == moduleItem}
						<span class="">{moduleItem}</span>
					{:else}
						<span class="tag">
							<a href="/blog?module={moduleItem}" title={moduleItem}>{moduleItem}</a>
						</span>
					{/if}
				{/each}
			</div>
			<div class="question-wrapper">
				{#each data.posts as post}
					<div class="">
						<a class="question-item" href="/blog/{post.slug}">
							<div class="title-line">
								<i class="inline float-left mr-2">
									<img src={Ask} class="inline" alt="SvelteKit" width="25px" height="25px" />
								</i>
								<span class="question-title hot">{post.title}</span>
								{#if post.popular}
									<i class="hot-icon" />
								{/if}
							</div>
						</a>
						<span class="text-xs">阅读量：{post.viewCount}人</span>
						<span class="text-xs">发布时间：{post.publishTime}</span>
						<div class="answer">
							<i class="inline float-left mr-2">
								<img src={Answer} class="inline" alt="" srcset="" width="25px" height="25px" />
							</i>
							{@html post.html}
						</div>
						<hr class="mb-1 mt-1" />
					</div>
				{/each}
			</div>
			<div class="pagination" />
		</div>
	</div>
	<div class="w-full md:w-2/12 bg-white rounded-lg p-4">
		<div class="section relative-question">
			<h3 class="section-title">相关问题</h3>
			<ul class="content">
				{#each data.posts as post}
					<li class="question">
						<a class="ask" href="/blog/{post.slug}" title={post.title}>{post.title}</a>
						<p class="info">
							<span class="tag">{post.module}</span>
							<span class="time">{post.publishTime}</span>
						</p>
					</li>
				{/each}
			</ul>
		</div>
	</div>
</div>

<style lang="less">
	svg {
		display: inline;
	}
</style>
